<template>
  <vab-skeleton
      title="用户列表"
      avatar
      :row="3"
      :loading="props.loading"
  >
    <!-- 单层循环渲染用户列表 -->
    <van-card
        v-for="user in props.userList"
        :key="user.id"
        :desc="user.profile"
        :title="`${user.username} (${user.planetCode})`"
        :thumb="user.avatarUrl"
    >
      <template #tags>
        <van-tag plain type="danger" v-for="tag in user.tags" :key="tag" style="margin-right: 8px; margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button size="mini">联系我</van-button>
      </template>
    </van-card>

    <!-- 空状态提示 -->
    <van-empty v-if="!props.userList || props.userList.length < 1" description="搜索结果为空" />
  </vab-skeleton>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
import { userType } from "../assets/user";

interface UserCardListProps {
  loading: boolean;
  userList: userType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: true,
  userList: [] as userType[],
});
</script>

<style scoped>
/* 保持原有样式 */
</style>